@import '../../styles/global.less';
.k-collapse {
  background-color: @back-color;
  border: 1px solid @border-color;
  border-radius: @radius;
  border-bottom: 0;
  overflow: hidden;
  &>.k-collapse-item {
    border-bottom: 1px solid @border-color;
    &>.k-collapse-header {
      line-height: 22px;
      padding: 12px 0 12px 40px;
      cursor: pointer;
      position: relative;
      color:@title-color;
      font-size: 14px;
      &>i {
        position: absolute;
        left: 16px;
        top: 0;
        line-height: 46px;
        transform: rotate(0);
        transition: transform .3s ease-in-out;
      }
    }
    .k-collapse-content {
      background-color: #fff;
      border-top: 1px solid @border-color;
      padding: 0 16px;
      transition: all .3s ease-in-out;
      box-sizing: border-box;
      overflow: hidden;
      .k-collapse-content-box {
        padding: 16px 0;
      }
    }
  }
  &>.k-collapse-item-active {
    &>.k-collapse-header>i {
      transform: rotate(90deg);
    }
  }
}

.k-collaplse-sample {
  border: none;
  background: none;
  .k-collapse-item {
    background: @light;
    border: none;
    margin-bottom: 10px;
    border-radius: @radius;
    overflow: hidden;
    .k-collapse-content {
      border: none;
      background: none;
    }
  }
}

.k-alert-info {
  background: tint(@main, 90%);
  border-color: tint(@main, 70%);
  .k-alert-icon {
    color: @main;
  }
}
.k-collaplse-slide-enter-actived {
  animation: slideIn 0.3s ease-in-out;
  animation-fill-mode: both;
}
.k-collaplse-slide-leave-actived {
  animation: slideOut 0.3s ease-in-out;
  animation-fill-mode: both;
}
@keyframes slideIn {
  0% {
    transform: scaleY(0);
    transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes slideOut {
  0% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    transform-origin: 0% 0%;
    opacity: 0;
  }
}